import { ModalForm, ProFormInstance } from '@ant-design/pro-components';
import { useRef } from 'react';
import type { GithubIssueItem } from '../index';
import { useAsyncEffect } from 'ahooks';

// 入住操作弹框
const ModalDialog = (props: { visible: boolean; close: () => void; form: any }) => {
  // 表单操作ref
  const formRef = useRef<ProFormInstance>(null);

  // 取出父组件传过来的--对话框显示隐藏---关闭对话框事件
  const { visible, close, form } = props;

  useAsyncEffect(async () => {
    if (visible) {
      if (form) {
        if (form.cmdInfo) {
          document.getElementById('pre').textContent = JSON.stringify(
            JSON.parse(form.cmdInfo),
            null,
            4,
          );
        } else {
          document.getElementById('pre').textContent = '没有指令数据';
        }
      }
    }
  }, [visible]);

  return (
    <ModalForm<GithubIssueItem>
      formRef={formRef}
      open={visible}
      title={'发送指令'}
      autoFocusFirstInput
      labelCol={{ span: 3 }}
      rowProps={{ gutter: 14 }}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          close();
        },
      }}
      submitTimeout={2000}
      onFinish={async () => {
        close();
      }}
    >
      <pre id="pre"></pre>
    </ModalForm>
  );
};

export default ModalDialog;
